{% extends "base.html" %}
{% load i18n %}
{% load static %}
{% load gravatar %}

{% block title %}{{ serialized.title }} | {% trans "Argument Map" %}{% endblock %}

{% block extra-meta %}
    <meta property="og:description" content="{{ description }}"/>
    <meta name="canonical" content="{{ serialized.full_url }}"/>
{% endblock %}

{% block description %}{{ description }}{% endblock  %}

{% block body-attrs %} id="contention-detail"{% endblock %}

{% block header %}
    <header class="contention-detail-header">
        {% with channel=contention.channel %}
            {% if channel %}
            <div id="logo" class="contention-logo with-channel">
                <a href="{{ channel.get_absolute_url }}">argüman<img src="{% static "img/logo.png" %}" /></a>
                <a href="{{ channel.get_absolute_url }}" class="channel">/{{ contention.channel }}</a>
            </div>
            {% else %}
            <div id="logo" class="contention-logo">
                <a href="/">argüman<img src="{% static "img/logo.png" %}" /></a>
            </div>
            {% endif %}
        {% endwith %}
        <div class="header-block">
            <div class="sender">
                <h4>{% trans "sender" %}</h4>
                <a href="{% url "auth_profile" serialized.user.username %}">
                    {% gravatar contention.user 40 %}
                    {{ serialized.user.username|lower }}
                </a>
            </div>
        </div>
        <div class="header-block original-discourse">
            <h4>{% trans "source" %}</h4>
            <p>{% spaceless %}{% if serialized.owner %} 
                {{ serialized.owner }}
             {% elif serialized.sources %}
                {{ serialized.sources|urlizetrunc:30 }} 
            {% else %} 
                {% trans "Unspecified" %} 
            {% endif %}{% endspaceless %}</p>
        </div>
        <div class="header-block argument-actions">
            <ul>
                <li class="random-argument">
                    <a href="{% url "contentions_random" %}">
                        {% trans "RANDOM" %}
                        <img align="right" width="18" src="{% static "img/arrow-right.svg" %}" />
                    </a>
                </li>
                <li class="related-arguments">
                    <a href="{% url "contentions_random" %}">
                        {% trans "RELATED ARGUMENTS" %}
                        <img align="right" width="18" src="{% static "img/arrow-down.svg" %}" />
                    </a>
                </li>
            </ul>
        </div>
{#        <div class="header-block random-argument">#}
{#            <h4><a href="{% url "contentions_random" %}">{% trans "RANDOM" %}#}
{#                <img align="right" width="24" src="{% static "img/arrow-right.svg" %}" /></a></h4>#}
{#        </div>#}
{#        <div class="header-block related-arguments">#}
{#            <img align="right" width="24" src="{% static "img/arrow-down.svg" %}" />#}
{#            <h4><a href="#">{% trans "RELATED ARGUMENTS" %}</a></h4>#}
{#        </div>#}
        <div class="header-block share">
            <h4>{% trans "share" %}</h4>
            <p>
                <a target="_blank" href="https://www.facebook.com/sharer.php?u={{ serialized.full_url }}" class="tree-view active"> <img width="20" height="20" src="{% static "img/facebook.svg" %}" /> </a>
                <a target="_blank" href="http://twitter.com/home?status={{ serialized.title }} {{ serialized.full_url }}" class="list-view"> <img width="20" height="20" src="{% static "img/twitter.svg" %}" /> </a>
            </p>
        </div>
        <div class="header-block view">
            <h4>{% trans "view" %}</h4>
            <p>
                <a id="tree-view-button" href="?view=tree" class="tree-view active">     <img width="18" height="18" alt="{% trans "Tree" %}" src="{% static "img/tree.svg" %}" /> </a>
                <a id="list-view-button" href="?view=list" class="list-view">     <img width="20" height="20" alt="{% trans "List" %}" src="{% static "img/thread.svg" %}" /> </a>
            </p>
        </div>
    </header>

    {% if messages %}
    <ul class="messages">
        {% for message in messages %}
        <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
        {% endfor %}
    </ul>
    {% endif %}
{% endblock %}


{% block footer %}{% endblock %}
